<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>performance overview</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
		
		$(function() {
		    $( "#startTime" ).datetimepicker({
		    	timeFormat: 'HH:mm:ss',
		    	stepHour: 1,
		    	stepMinute: 10
		    });
		  });
		  
		$(function() {
		    $( "#endTime" ).datetimepicker({
			   	timeFormat: 'HH:mm:ss',
			   	stepHour: 1,
			   	stepMinute: 10
			});
		});
		
	    function validateForm(){
			  // after select the endTime, we do the time validate here.
			var startTime = Date.parse($("#startTime").val());
			var endTime = Date.parse($("#endTime").val());
			var date = new Date();
			var difference = (endTime-startTime) / (60000 * 10);  // 10min is the minimum request
			
			if(isNaN(startTime)){
				alert("Start of time range cannot be empty");
				return false;
			}
			if(isNaN(endTime)){
				alert("End of time range cannot be empty");
				return false;
			}	
			if(startTime - date.getTime() > 0 || endTime - date.getTime() > 0){
				alert("Time range must be before now");
				return false;
			}
			if(difference <= 0){
				alert("The start time must come before the end time.");
				return false;
			}
			if(difference < 1){
				alert("The range must be at least 10min apart.");
				return false;
			}
		};
		  
		  function getStats(){
			  var type = $("#type").val();
			  if(type !== "default"){
			  $.ajax(
			  			{
			  				type: "POST",
			  				url:  "/dashboard/report/firstLevelDetail",
			  				data: "type=" + type,
			  				success: function(data){
			  					var json = jQuery.parseJSON(data);
			  					$("#box3").html(json.suggestion + '<br><br>' + json.content);
			  					$('#box2').highcharts({		  						
			  					    chart: {
			  					        type: 'gauge',
			  					        plotBorderWidth: 1,
			  					        plotBackgroundColor: {
			  					        	linearGradient: { x1: 0, y1: 0},
			  					        	stops: [
			  					        		[0, '#FFF4C6'],
			  					        		[0.3, '#FFFFFF'],
			  					        		[1, '#FFF4C6']
			  					        	]
			  					        },
			  					        plotBackgroundImage: null,
			  					        height: 200
			  					    },
			  					
			  					    title: {
			  					        text: json.title
			  					    },
			  					    
			  					    pane: [{
			  					        startAngle: -45,
			  					        endAngle: 45,
			  					        background: null,
			  					        center: ['50%', '145%'],
			  					        size: 350
			  					    }],	    		        
			  					
			  					    yAxis: [{
			  					        min: 0,
			  					        max: 100,
			  					        minorTickPosition: 'outside',
			  					        tickPosition: 'outside',
			  					        labels: {
			  					        	rotation: 'auto',
			  					        	distance: 20
			  					        },
			  					        plotBands: [
											{
											  	from: 0,
											  	to: json.bar1,
											  	color: '#C02316',
											  	innerRadius: '100%',
											  	outerRadius: '105%'
											},
											{
											  	from: json.bar1,
											  	to: json.bar2,
											  	color: '#FBF541',
											  	innerRadius: '100%',
											  	outerRadius: '105%'
											},
			  					            {
			  					        	from: json.bar2,
			  					        	to: 100,
			  					        	color: '#18C015',
			  					        	innerRadius: '100%',
			  					        	outerRadius: '105%'
			  					        }],
			  					        pane: 0,
			  					        title: {
			  					        	text: json.indicator + '% <br/><span style="font-size:8px">' + json.title + '</span>',
			  					        	y: -40
			  					        }
			  					    }],
			  					    
			  					    plotOptions: {
			  					    	gauge: {
			  					    		dataLabels: {
			  					    			enabled: true
			  					    		},
			  					    		dial: {
			  					    			radius: '100%'
			  					    		}
			  					    	}
			  					    },
			  					    	
			  					
			  					    series: [{
			  					        data: [0],
			  					        yAxis: 0
			  					    }]
			  					
			  					},
			  					
			  					// Let the music play
			  					function(chart) {
			  					    setInterval(function() {
			  					        var left = chart.series[0].points[0],
			  					            leftVal, 
			  					            inc = json.indicator;
			  					
			  					        leftVal =  left.y + inc;
			  					        if (leftVal < 0 || leftVal > 20) {
			  					            leftVal = inc;
			  					        }	  					
			  					        left.update(leftVal, true);
			  					        chart.redraw();
			  					
			  					    }, 500);
			  					
			  					});
			  				},
			  				error: function(e){
			  					alert("Error Ajax Request: " + e);
			  				}
			  			}
			 		);
			  }
		  }
</script>
</head>
<%@include file="header.jsp" %>	
<body>
<div id="bg">
	<div id="outer">
		<div id="header">
			<div id="logo">
				<h1>
				Database Tuning
				</h1>
			</div>
	    	<%@include file="navigation.jsp" %>
	    </div>
		<div id="main">
			<div id="left">
				<div id="box1">
					<form action="/dashboard/report/secondLevelDetail" method="post" onsubmit="return validateForm()">
						<fieldset>
						<legend>Monitor Information</legend>
						<dl>
							<dt><label for="target">Monitor Target: </label></dt>
							<dd><select id="type" name="type" onchange="getStats()">
								<option value="default" selected>--Select--</option>
								<option value="Shared Pool">Shared pool</option>
								<option value="Buffer Cache">Buffer cache</option>
								<option value="Redo Log Buffer/File">Redo log buffer/file</option>
								<option value="Sorting Memory">Memory area used for sorting</option>
								</select>
							</dd>
						</dl>
						</fieldset>
						
						<fieldset>
						<legend>Observation Interval</legend>
						<dl>
							<dt><label for="start">Start: </label></dt>
							<dd><input id="startTime" name="startTime" type="text" /></dd>
						</dl>
						<dl>
							<dt><label for="end">End: </label></dt>
							<dd><input id="endTime" name="endTime" type="text" /></dd>
						</dl>
						<dl>
							<dt><label for="x unit">X Unit: <a title="click to configure" href="/dashboard/admin/configure">${x}</a> hour</label></dt>
							<dd><input id="xUnit" name="xUnit" value="<c:out value='${x}' />" type="hidden"/></dd>
						</dl>
						</fieldset>
						
						<fieldset>
    						<input type="submit" name="submit" id="submit" value="Submit" />
    					</fieldset>	
					</form>
				</div>
			</div>
			<div id="right">
			<div id="box2">
			</div>
			<div id="box3">
			</div>
			</div>
			<br class="clear" />
			<%@include file="footer.jsp" %>
		</div>
	</div>
</div>

</body>
</html>
